<template>
	<div style="height: 100%">
		<el-form class="query-form" :inline="true" :model="formQuery">
			<el-col :span="4">
				<el-form-item>
					<el-input
						clearable
						placeholder="模板名称"
						v-model="formQuery.inputString"
					></el-input>
				</el-form-item>
			</el-col>
			<el-form-item>
				<el-button @click="query">查询</el-button>
			</el-form-item>
			<el-form-item style="position: absolute; right: 0.2rem">
				<template v-if="!RoomSelect">
					<el-button
						type="primary"
						@click="
							pkTaxRateTemplateId = 0;
							dialogtaxRateVisible = true;
						"
						>新增
					</el-button>
				</template>
				<template v-else>
					<el-button type="primary" @click="replaceTemplate"
						>确认更换模板</el-button
					>
					<el-button type="info" @click="cancelTemplate"
						>取消</el-button
					>
				</template>
			</el-form-item>
		</el-form>
		<div class="div-table" style="padding: 0 20px">
			<el-scrollbar style="height: 100%">
				<el-table
					ref="multipleTable"
					class="roomTable"
					:data="tableData"
					:row-class-name="tableRowClassName"
					style="width: 100%"
				>
					<el-table-column type="selection"></el-table-column>
					<el-table-column
						type="index"
						label="序号"
						width="70"
					></el-table-column>
					<el-table-column
						prop="taxRateTemplateName"
						label="模板名称"
						width="700"
					></el-table-column>
					<el-table-column
						v-if="RoomSelect"
						label="操作"
						align="center"
						header-align="center"
					>
						<template slot-scope="{ row }">
							<el-link
								type="primary"
								:underline="false"
								@click="
									readlony = true;
									pkTaxRateTemplateId =
										row.pkTaxRateTemplateId;
									dialogtaxRateVisible = true;
								"
							>
								| 模板详情
							</el-link>
						</template>
					</el-table-column>
					<el-table-column
						v-if="!RoomSelect"
						label="操作"
						align="center"
						header-align="center"
					>
						<template slot-scope="{ row }">
							<router-link
								class="el-link el-link--primary"
								:to="
									'/taxrate/relation/' +
									row.pkTaxRateTemplateId +
									'?name=' +
									row.taxRateTemplateName
								"
							>
								| 关联房间
							</router-link>
							<el-link
								type="primary"
								:underline="false"
								@click="
									readlony = true;
									pkTaxRateTemplateId =
										row.pkTaxRateTemplateId;
									dialogtaxRateVisible = true;
								"
							>
								| 模板详情
							</el-link>
							<el-link
								type="primary"
								:underline="false"
								@click="
									(readlony = false),
										(pkTaxRateTemplateId =
											row.pkTaxRateTemplateId);
									dialogtaxRateVisible = true;
								"
							>
								| 编辑
							</el-link>
							<el-link
								type="primary"
								:underline="false"
								@click="deleteById(row.pkTaxRateTemplateId)"
							>
								| 删除
							</el-link>
						</template>
					</el-table-column>
				</el-table>
			</el-scrollbar>
		</div>
		<div class="page-div-placeholder"></div>
		<div class="page-div" style="background: #fff">
			<el-pagination
				layout="prev, pager, next,jumper,sizes"
				:current-page="pageObj.page"
				:page-size="pageObj.pageSize"
				:total="pageObj.total"
				 @current-change="currentPageChange" @size-change="sizeChange"
                :page-sizes='pageObj.pageSizes'

			>
			</el-pagination>
		</div>
		<el-dialog
			class="dialog"
			:show-close="false"
			title="编辑税率模板"
			:visible.sync="dialogtaxRateVisible"
			width="30%"
		>
			<el-row>
				<el-form
					:disabled="readlony"
					:model="taxRateForm"
					ref="taxRateForm"
					:rules="taxRateRules"
					:inline="true"
				>
					<el-row>
						<el-col>
							<el-form-item
								class="TaxRateTemplateName"
								label="模板名称"
								prop="taxRateTemplateName"
							>
								<el-input
									v-model="taxRateForm.taxRateTemplateName"
								></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="7">
							<el-form-item label-width="0">
								<el-checkbox v-model="rent" checked
									>房租</el-checkbox
								>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label-width="0">
								<el-select
									:disabled="!rent"
									v-model="taxRateForm.rentTaxRate"
								>
								    <el-option label="1%" :value="1"></el-option>
								    <el-option label="1.5%" :value="0.015"></el-option>
									<el-option
										v-for="(item, index) in 30"
										v-show="item>1"
										:key="index"
										:label="item + '%'"
										:value="item / 100"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="7">
							<el-form-item label-width="0">
								<el-checkbox v-model="manage" checked
									>管理费</el-checkbox
								>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label-width="0">
								<el-select
									:disabled="!manage"
									v-model="
										taxRateForm.managementExpenseTaxRate
									"
								>
								    <el-option label="1%" :value="1"></el-option>
								    <el-option label="1.5%" :value="0.015"></el-option>
									<el-option
										v-for="(item, index) in 30"
										v-show="item>1"
										:key="index"
										:label="item + '%'"
										:value="item / 100"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="7">
							<el-form-item label-width="0">
								<el-checkbox v-model="water" checked
									>水费</el-checkbox
								>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label-width="0">
								<el-select
									:disabled="!water"
									v-model="taxRateForm.waterTaxRate"
								>

									<el-option label="1%" :value="1"></el-option>
								    <el-option label="1.5%" :value="0.015"></el-option>
									<el-option
										v-for="(item, index) in 30"
										v-show="item>1"
										:key="index"
										:label="item + '%'"
										:value="item / 100"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="7">
							<el-form-item label-width="0">
								<el-checkbox v-model="electric" checked
									>电费</el-checkbox
								>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label-width="0">
								<el-select
									:disabled="!electric"
									v-model="taxRateForm.electricTaxRate"
								>
									<el-option label="1%" :value="1"></el-option>
								    <el-option label="1.5%" :value="0.015"></el-option>
									<el-option
										v-for="(item, index) in 30"
										v-show="item>1"
										:key="index"
										:label="item + '%'"
										:value="item / 100"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="7">
							<el-form-item label-width="0">
								<el-checkbox v-model="hygiene" checked
									>卫生清洁费</el-checkbox
								>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label-width="0">
								<el-select
									:disabled="!hygiene"
									v-model="taxRateForm.sanitaryFeeTaxRate"
								>
									<el-option label="1%" :value="1"></el-option>
								    <el-option label="1.5%" :value="0.015"></el-option>
									<el-option
										v-for="(item, index) in 30"
										v-show="item>1"
										:key="index"
										:label="item + '%'"
										:value="item / 100"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="7">
							<el-form-item label-width="0">
								<el-checkbox v-model="lift">电梯费</el-checkbox>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label-width="0">
								<el-select
									:disabled="!lift"
									v-model="taxRateForm.elevatorFeeTaxRate"
								>
									<el-option label="1%" :value="1"></el-option>
								    <el-option label="1.5%" :value="0.015"></el-option>
									<el-option
										v-for="(item, index) in 30"
										v-show="item>1"
										:key="index"
										:label="item + '%'"
										:value="item / 100"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row style="margin-top: 20px">
					<el-col
						:span="24"
						style="text-align: center"
						v-if="!readlony"
					>
						<el-button
							:loading="hasSubmit"
							type="primary"
							style="margin-right: 20px"
							@click="taxRateSubmit"
							>确定
						</el-button>
						<el-button @click="dialogtaxRateVisible = false"
							>取消</el-button
						>
					</el-col>
					<el-col v-else>
						<el-button @click="dialogtaxRateVisible = false"
							>返回</el-button
						>
					</el-col>
				</el-row>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import { listMixin } from "@/mixin"
import {
	addFeeRateTemplate,
	updateTemplate,
	getAllByPage,
	getAllByCondition,
	deleteTemplate,
	getTemplateById
} from "@/api/operations/taxRate/taxRate";

export default {
	mixins: [listMixin],
	data() {
		return {
			readlony: false,
			canSubmit: false,
			RoomSelect: false,//是否是 ROOM跳转过来的
			rent: true,
			manage: true,
			water: true,
			electric: true,
			hygiene: true,
			lift: true,
			hasSubmit: false,
			pkTaxRateTemplateId: 0,
			dialogtaxRateVisible: false,
			formQuery: {
				state: null
			},
			taxRateForm: {},
			tableData: [],
			taxRateRules: {
				taxRateTemplateName: [
					{ required: true, message: '请输入模板名称', trigger: 'blur' }
				]
			}
		};
	},
	watch: {
		dialogtaxRateVisible(newVal, oldVal) {
			if (newVal) {
				if (this.pkTaxRateTemplateId) {
                    getTemplateById(this.pkTaxRateTemplateId).then(res => {
						//不是显示详情 并且 code === 30000
						if (this.readlony === false && res.code === 30000) {
							this.$promptBox.show({ title: "提示信息", message: res.msg }).catch(err => {
								this.dialogtaxRateVisible = false;
							});
						}
						this.taxRateForm = res.data;
                        if (this.taxRateForm.elevatorFeeTaxRate == 0) this.lift = false;
                        if (this.taxRateForm.rentTaxRate == 0)this.rent=false;
                        if (this.taxRateForm.managementExpenseTaxRate == 0) this.manage=false;
                        if (this.taxRateForm.waterTaxRate == 0) this.water=false;
                        if (this.taxRateForm.electricTaxRate == 0) this.electric = false;
                        if (this.taxRateForm.sanitaryFeeTaxRate==0) this.hygiene = false;
                    });
				} else {
					this.readlony = false;
                    this.taxRateForm = {};
                    this.lift = true;
                    this.rent = true;
                    this.manage = true;
                    this.water = true;
                    this.electric = true;
                    this.hygiene = true;
				}
			}
		}
	},
	methods: {
		deleteById(id) {
			this.$promptBox.show({ title: "是否删除", message: "是否删除该税率模板?" }).then(() => {
				deleteTemplate(id).then(res => {
					if (res.code === 10000) {
						this.$message.success(res.msg);
						this.loadDataProxy();
					} else if (res.code === 30000) {
						this.$tips.show({ message: res.msg });
					}
				});
			});
		},
		replaceTemplate() {
			let tableData = this.$refs.multipleTable.selection;
			if (tableData.length === 0) {
				this.$message.warning("请选择要绑定的税率模板");
			} else if (tableData.length > 1) {
				this.$message.warning("只能绑定一个税率模板");
			} else {
				if (this.$route.query.time) {
					this.$router.push(`/room/edit?TaxRateTemplateName=${tableData[0].taxRateTemplateName}&TaxRateTemplateId=${tableData[0].pkTaxRateTemplateId}&time=${this.$route.query.time}`);
				} else if (this.$route.query.roomId) {
					this.$promptBox.show({ title: "提示", message: "下月缴费将按最新系数模板计算，是否确认更换" }).catch(() => {
						this.cancelTemplate();
					});
					let roomId = this.$route.query.roomId;
					this.canSubmit = true;
					let obj = {};
					obj.pkRoomId = roomId;
					obj.fkTaxRateTemplateId = tableData[0].pkTaxRateTemplateId;
					updateRoom(obj).then(res => {
						if (res.code === 10000) {
							this.$message.success(res.msg);
							window.history.go(-1);
						}
					}).finally(_ => {
						this.canSubmit = false;
					});
				}
			}
		},
		cancelTemplate() {
			if (this.$route.query.time) {
				this.$router.push(`/room/edit?time=${this.$route.query.time}`);
			} else if (this.$route.query.roomId) {
				window.history.go(-1);
			}
		},
		taxRateSubmit() {
			if (this.readlony) {
				this.dialogtaxRateVisible = false;
				return;
			}
			this.$refs.taxRateForm.validate(valid => {
				if (valid) {
					this.hasSubmit = true;
					if (!this.lift) this.taxRateForm.elevatorFeeTaxRate = 0;
					if (!this.rent) this.taxRateForm.rentTaxRate = 0;
					if (!this.manage) this.taxRateForm.managementExpenseTaxRate = 0;
					if (!this.water) this.taxRateForm.waterTaxRate = 0;
					if (!this.electric) this.taxRateForm.electricTaxRate = 0;
					if (!this.hygiene) this.taxRateForm.sanitaryFeeTaxRate = 0;

					if (this.pkTaxRateTemplateId === 0) {
						addFeeRateTemplate(this.taxRateForm).then(res => {
							if (res.code === 10000) {
								this.$message.success(res.msg);
								this.dialogtaxRateVisible = false;
								this.loadDataProxy();
							}
						}).finally(_ => {
							this.hasSubmit = false;
						});
					} else {
						updateTemplate(this.taxRateForm).then(res => {
							if (res.code === 10000) {
								this.$message.success(res.msg);
								this.dialogtaxRateVisible = false;
								this.loadDataProxy();
							}
						}).finally(_ => {
							this.hasSubmit = false;
						});
					}
				}
			})
		},
		loadData() {
			if (this.where) {
				return getAllByCondition(this.where).then(res => {
					let { data, total } = res;
					this.tableData = data;
					this.pageObj.total = total;
				});
			} else {
				return getAllByPage(this.pageObj).then(res => {
					let { data, total } = res;
					this.tableData = data;
					this.pageObj.total = total;
				});
			}
		},
		tableRowClassName(row, rowIndex) {
			row = row.row;
			if (row.status === "0") {
				return "warning-row";
			} else {
				return "";
			}
		},
	},
	mounted() {
		if (this.$route.query.time || this.$route.query.roomId) {
			this.RoomSelect = true;
		}
		this.loadDataProxy();
	},
};
</script>
<style scoped>
>>> .el-dialog .el-dialog__title {
	font-size: 0.2rem;
}

>>> .dialog .el-dialog .el-dialog__title {
	font-size: 0.2rem;
	color: white;
}

>>> .dialog .el-dialog .el-dialog__header {
	background-color: #409eff;
	margin-bottom: 20px;
	padding: 10px 20px;
}

>>> .TaxRateTemplateName {
	width: 100%;
}

>>> .TaxRateTemplateName .el-form-item__content {
	width: 80%;
}
</style>
